{##
 # List the adventure elements, with infinite scroll
 #
 # If there is a 'next_page_token', add a div that will fetch
 # the next block of results from the /public-adventures/more endpoint.
 #}
{% for adventure in adventures %}
<div
  class="adventure-item text-gray-800 flex flex-col cursor-pointer p-2 border-b border-gray-300"
  tabindex="0"
  _="on click remove .selected from .adventure-item then add .selected to me end on keyup[key is 'Enter'] send click to me"
  hx-get="/public-adventures/preview/{{ adventure.id }}" hx-target="#preview-div"
  >
  <div class="flex-1">
    <span class="text-xl min-h-28">{{ adventure.name }}</span>
  </div>
  {#
  <div alt="This adventure has been cloned {{ adventure.cloned_times }} times">
    {{ adventure.cloned_stars }}
    {{ adventure.cloned_times }}
    {% for x in range(adventure.cloned_stars) %}
      <span class="fa fa-star text-green-500"></span>
    {% endfor %}
  </div>
  #}
  <div class="flex-none text-xs">
    <div class="flex">
      <div class="flex-1 text-gray-500">{{ adventure.creator }}</div>
      <div>
        <span class="flex-1 text-gray-500" title="{{ adventure.date|jsts_to_unix|datetimeformat }}">
          {{ adventure.date|jsts_to_unix|format_date_rel }}
        </span>
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex-1 text-gray-500">{{_('level')}} {{ adventure.levels|join(', ') }}</div>
      <div class="flex-none">
        {% if adventure.solution_example %}
          <span class="fa fa-book text-gray-500" title="{{_('this_adventure_has_an_example_solution')}}"></span>
        {% endif %}
      </div>
    </div>
    {% if adventure.tags %}
      <div>
        {% for tag in adventure.tags %}
        <span class="inline-block bg-pink-200 rounded-full px-2 text-xs text-gray-700 mr-1 mb-1">{{ tag }}</span>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>
{% endfor %}

{# Infinite scroll token #}
{% if next_page_token %}
  <div
    hx-get="/public-adventures/more"
    hx-trigger="intersect once"
    hx-swap="outerHTML"
    hx-include="this">

    <input type="hidden" name="selected_lang" value="{{selected_lang}}">
    <input type="hidden" name="selected_level" value="{{selected_level}}">
    <input type="hidden" name="q" value="{{q}}">
    <input type="hidden" name="selected_tag" value="{{selected_tag}}">
    <input type="hidden" name="page" value="{{next_page_token}}">

    <img src="{{static('/images/spinner.gif')}}" width="50" class="m-auto py-4">

</div>
{% endif %}
